<template>
    <div class="box_content" v-loading="loadingStatus">
      <el-row :gutter="15">
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
          <el-col :span="12">
            <el-form-item label="项目名称" prop="projectName">
              <el-input v-model="formData.projectName" :disabled="!stepObj.step1" placeholder="请输入项目名称" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="缴费户号" prop="search1">
              <el-input v-model="formData.search1" :disabled="!stepObj.step1" placeholder="请输入缴费户号" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
        </el-form>
        <el-form ref="elForm1" :model="formData" :rules="rules" size="medium" label-width="100px" v-show="!stepObj.step1">
          <el-col :span="12" class="mg30">
            <el-form-item label="姓名：">
                {{ userData.userName }}
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mg30">
            <el-form-item label="地址：">
              {{ userData.userAddress }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用电量：">
                <span class="co_blue">{{ userData.useLight }}</span>  千瓦时
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单价：">
              <span class="co_blue">{{ userData.price }}</span> 元/千瓦时
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="账户余额：">
                <span class="co_blue">{{ userData.haveMoney }}</span> 元
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="应缴金额：">
                <span class="co_blue">{{ getNeedMoney }}</span>  元
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="缴费金额" prop="search1">
              <el-input v-model="userData.inputMoney" type="text" :disabled="!stepObj.step2" placeholder="请输入缴费金额" :input="validateInput" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="应缴金额：" style="opacity: 0;">
            </el-form-item>
          </el-col>
        </el-form>
        
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px"  :disabled="!stepObj.step3" v-show="!stepObj.step1 && !stepObj.step2">
          <el-col :span="12"  class="mg30">
            <el-form-item label="支付方式" prop="paymentType">
              <el-select v-model="formData.paymentType" placeholder="请选择支付方式" clearable
                :style="{width: '100%'}">
                <el-option v-for="(item, index) in paymentTypeOptions" :key="index" :label="item.label"
                  :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>

      <div class="button_box">
        <el-button type="primary" @click="submitFormStep1" v-show="stepObj.step1">查询</el-button>
        <el-button type="primary" @click="submitFormStep2" v-show="stepObj.step2">确认</el-button>
        <el-button type="primary" @click="submitFormStep3" v-show="stepObj.step3">缴费</el-button>
        <!-- <el-button type="primary" @click="submitFormStep4" v-show="stepObj.step4">完成</el-button> -->
      </div>
      
    </div>
  </template>
  <script>
  export default {
    components: {},
    props: [],
    data() {
      return {
        loadingStatus: false,
        paymentTypeOptions: [{
          "label": "请选择",
          "value": "00"
        }, {
          "label": "银行卡",
          "value": "01"
        }, {
          "label": "微信",
          "value": "02"
        }, {
          "label": "支付宝",
          "value": "03"
        }],
        formData: {
            projectName: undefined,
            search1: undefined,
            paymentType: '00',
        },
        userData:{
            //  用户姓名
            userName:'**亮',
            // 用户地址
            userAddress:'河南省南阳市*****诸葛庐1号',
            // 用电量
            useLight:138,
            // 单价
            price:0.75,
            // 所需缴费金额
            needPayMoney:'',
            // 账户余额
            haveMoney:200,
            // 用户输入缴费金额
            inputMoney:''
        },
        rules: {
            projectName: [{
                required: true,
                message: '请输入项目名称',
                trigger: 'blur'
            }],
            search1: [{
                required: true,
                message: '请输入缴费户号',
                trigger: 'blur'
            }],
        },
        stepObj:{
            step1:true,
            step2:false,
            step3:false,
            step4:false,
        }
      }
    },
    computed: {
        getNeedMoney: function(){
            var needMoney = this.userData.useLight * this.userData.price - this.userData.haveMoney
            needMoney = needMoney <=0?0:needMoney;
            return needMoney
        },
        validateInput: function(){
            if(this.userData.inputMoney < 0){
                this.userData.inputMoney = ''
                return ''
            }
            else{
                let result = this.userData.inputMoney.match(/\d+\.?\d{0,2}/,'')
                this.userData.inputMoney = result
                return result
            }
        },
    },
    watch: {},
    created() {},
    mounted() {},
    methods: {
        // 步骤1：用户输入项目名称，户号查询
        submitFormStep1() {
            // 规则校验
            this.$refs['elForm'].validate(valid => {
            if (!valid) return
            console.log('打印信息')
            this.loadingStatus = true;
            setTimeout(()=>{
                this.stepObj = {
                    step1:false,
                    step2:true,
                    step3:false,
                    step4:false,
                }
                this.loadingStatus = false;
            },1000)
        
            // TODO 提交表单
            })
        },
        // 第二步，查询回来用户个人信息，用户选择缴费金额
        submitFormStep2(){
            this.loadingStatus = true;
            setTimeout(()=>{
                this.stepObj = {
                    step1:false,
                    step2:false,
                    step3:true,
                    step4:false,
                }
                this.loadingStatus = false;
            },1000)
            
        },
        // 第三步，选择支付方式
        submitFormStep3(){
            this.loadingStatus = true;
            setTimeout(()=>{
                this.stepObj = {
                    step1:false,
                    step2:false,
                    step3:false,
                    step4:true,
                }
                this.loadingStatus = false;
                this.$alert('恭喜您缴费成功', '温馨提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                        // this.$message({
                        // type: 'info',
                        // message: `action: ${ action }`
                        // });
                        this.formData.projectName = '';
                        this.formData.search1 = '';
                        this.userData.inputMoney = '';
                        this.formData.paymentType = '00';
                        this.stepObj = {
                            step1:true,
                            step2:false,
                            step3:false,
                            step4:false,
                        }
                    }
                });
            },1000)
            
        },
        // 第四步，支付成功，弹窗提醒
        submitFormStep4(){
            // this.loadingStatus = true;
            // setTimeout(()=>{
            //     this.formData.projectName = '';
            //     this.formData.search1 = '';
            //     this.stepObj = {
            //         step1:true,
            //         step2:false,
            //         step3:false,
            //         step4:false,
            //     }
            //     this.loadingStatus = false;
            // },1000)
            this.formData.projectName = '';
            this.formData.search1 = '';
            this.stepObj = {
                step1:true,
                step2:false,
                step3:false,
                step4:false,
            }
            
        },
        resetForm() {
            this.$refs['elForm'].resetFields()
        },
    }
  }
  
  </script>
  <style scoped  lang="scss">
.box_content{
    padding-top: 5vh;
    padding-bottom: 5vh;
    padding-left: 5vw;
    padding-right: 5vw;
    .co_blue{
        color: #1890ff;
    }
    .button_box{
        margin: auto;
        margin-top: 30px;
        text-align: center;
    }
    .mg30{
        margin-top: 30px;
    }
  }
  .block{
    margin-top: 20px;
  }
  </style>
  